import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Spin, Select, InputNumber } from 'antd';
import ComboGrid from '@/components/ComboGrid';
import request from '@/utils/request';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

function AddConfigRow({ visiable, close, form, callback }) {
  const { getFieldDecorator } = form;
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState([[], []]);
  const [eventType, setEventType] = useState('');

  useEffect(() => {
    setLoading(true);
    Promise.all([
      request('pmc/pms/StaticDataController/getStaticAttr.do', {
        data: {
          busiObjNbr: 'PmTachePlanRela',
          attrNbr: 'eventType',
        },
      }),
      request('pmc/pms/StaticDataController/getStaticAttr.do', {
        data: {
          busiObjNbr: 'PmOrderFlowDef',
          attrNbr: 'timeUnit',
        },
      }),
    ])
      .then(res => {
        setResult(res);
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

  const onSubmit = () => {
    form.validateFields((err, value) => {
      if (err) return;
      const eventTypeName = result[0].filter(function(item) {
        return item.attrValue === value.eventTypeName;
      })[0].attrValueName;
      let obj = {};
      if (eventType === 'WARN' || eventType === 'TIMEOUT') {
        const timeUnitName = result[1].filter(function(item) {
          return item.attrValue === value.timeUnit;
        })[0].attrValueName;
        if (eventType === 'WARN') {
          obj = {
            alertValue: value.alertValue,
            timeUnit: value.timeUnit,
            timeUnitName,
          };
        } else {
          obj = {
            limitValue: value.limitValue,
            timeUnit: value.timeUnit,
            timeUnitName,
          };
        }
      }
      callback({
        planName: value.planName[0].planName,
        planId: value.planName[0].planId,
        eventTypeName,
        eventType: value.eventTypeName,
        ...obj,
      });
      close();
    });
  };

  return (
    <Modal
      title="新增事件设置"
      width="500px"
      destroyOnClose
      onCancel={close}
      visible={visiable}
      onOk={onSubmit}
    >
      <Spin spinning={loading}>
        <Form>
          <Form.Item label="关联事件" {...formItemLayout}>
            {getFieldDecorator('eventTypeName', {
              rules: [
                {
                  required: true,
                  message: '关联事件不能为空',
                },
              ],
            })(
              <Select
                allowClear
                placeholder="请选择"
                onChange={value => {
                  setEventType(value);
                }}
              >
                {result[0].map(item => {
                  return <Select.Option value={item.attrValue}>{item.attrValueName}</Select.Option>;
                })}
              </Select>
            )}
          </Form.Item>

          {/* eslint-disable */
          eventType === 'WARN' ? (
            <>
              <Form.Item label="告警时限" {...formItemLayout}>
                {getFieldDecorator('alertValue', {
                  rules: [
                    {
                      required: true,
                      message: '告警时限不能为空',
                    },
                  ],
                })(<InputNumber style={{ width: '100%' }} allowClear placeholder="请输入" />)}
              </Form.Item>
              <Form.Item label="时间单位" {...formItemLayout}>
                {getFieldDecorator('timeUnit', {
                  rules: [
                    {
                      required: true,
                      message: '时间单位不能为空',
                    },
                  ],
                })(
                  <Select allowClear placeholder="请选择">
                    {result[1].map(item => {
                      return (
                        <Select.Option value={item.attrValue}>{item.attrValueName}</Select.Option>
                      );
                    })}
                  </Select>
                )}
              </Form.Item>
            </>
          ) : eventType === 'TIMEOUT' ? (
            <>
              <Form.Item label="完成时限" {...formItemLayout}>
                {getFieldDecorator('limitValue', {
                  rules: [
                    {
                      required: true,
                      message: '完成时限不能为空',
                    },
                  ],
                })(<InputNumber style={{ width: '100%' }} allowClear placeholder="请输入" />)}
              </Form.Item>
              <Form.Item label="时间单位" {...formItemLayout}>
                {getFieldDecorator('timeUnit', {
                  rules: [
                    {
                      required: true,
                      message: '时间单位不能为空',
                    },
                  ],
                })(
                  <Select allowClear placeholder="请选择">
                    {result[1].map(item => {
                      return (
                        <Select.Option value={item.attrValue}>{item.attrValueName}</Select.Option>
                      );
                    })}
                  </Select>
                )}
              </Form.Item>
            </>
          ) : null
          /* eslint-enable */
          }
          <Form.Item label="关联方案" {...formItemLayout}>
            {getFieldDecorator('planName', {
              rules: [
                {
                  required: true,
                  message: '关联方案不能为空',
                },
              ],
            })(
              <ComboGrid
                url="pmc/pms/RuleCfgController/findPlanPageQry"
                popupStyle={{ width: 500 }}
                placeholder="请选择关联方案"
                searchPlaceholder="请输入方案名称进行搜索"
                label="planName"
                rowKey="planId"
                pick="radio"
                columns={[
                  {
                    title: '方案名称',
                    dataIndex: 'planName',
                  },
                  {
                    title: '方案编码',
                    dataIndex: 'planCode',
                    ellipsis: true,
                  },
                ]}
              />
            )}
          </Form.Item>
        </Form>
      </Spin>
    </Modal>
  );
}

export default Form.create()(AddConfigRow);
